<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>权限列表</title>
    <header th:replace="header::html"></header>
</head>

<body class="">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">权限</a>
        <a>
          <cite>权限列表</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

<div class="x-body">

    <div class="layui-fluid">
        <div class="layui-row  layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">

                    <div class="layui-card-header">
                        <form class="layui-form layui-col-md12 x-so" id="layuiFormPermission">
                            <a class="layui-btn" id="crollAll">折叠展开</a>
                            <a class="layui-btn" onclick="xadmin.open('新增权限','/api-back/permission/add')"
                               permission="sys:menu:add"><i class="layui-icon"></i>新增权限</a>
                        </form>
                    </div>

                    <div class="layui-card-body ">
                        <table class="layui-hide" id="menuTable" lay-filter="member"></table>
                    </div>

                    <div class="layui-card-body ">
                        <script type="text/html" id="barDemo">
                            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
                            >删除</a>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

	var treetable, renderTable;

	layui.config({
		base: '/'
	}).extend({
		treetable: 'treetable-lay/treetable'
	}).use('treetable', function () {
		var table = layui.table;
		var $ = layui.jquery;
		var treetable = layui.treetable;

		renderTable = function () {
			treetable.render({
				// 渲染表格
				treeColIndex: 1,// treetable新增参数
				treeSpid: 0,
				treeIdName: 'id',// treetable新增参数
				treePidName: 'parentId',     // treetable新增参数
				treeLinkage: true,        // treetable新增参数
				elem: '#menuTable',
				url: '/api-back/permission/menuAll',
				cols: [
					[
						{type: 'numbers'},
						{field: 'name', width: 180, title: '名称'},
						{field: 'href', width: 160, title: 'url'},
						{field: 'sort', width: 60, title: '排序'},
						{field: 'permission', title: '资源标识'},
						{
							field: 'type', width: 60, title: '类型', templet: function (d) {
								return d.type == '1' ? "菜单" : "按钮";
							}
						},
						{title: '操作', toolbar: '#barDemo'}
					]
				],
				done: function () {
					// checkPermission();
				}
			});
		};
		renderTable();

		/**
		 * 折叠
		 */
		var croll = false;
		$("#crollAll").click(function () {
			if (croll) {
				treetable.expandAll('#menuTable');
				croll = false;
			} else {
				treetable.foldAll('#menuTable');
				croll = true;
			}
		});

		//监听工具条
		table.on('tool(member)', function (obj) {
			var data = obj.data;
			if (obj.event === 'del') {
				layer.confirm('真的删除行么', function (index) {
					$.ajax({
						url: "/api-back/permission/delete",
						type: "GET",
						data: {id: data.id},
						dataType: 'json',
						success: function (result) {
							layer.alert("删除成功", {icon: 1}, function (index1) {
								layer.close(index1);
								xadmin.father_reload();
								//table.reload('table');
							});
						},
					});

				});
			} else if (obj.event === 'edit') {
				xadmin.open('编辑用户信息', '/api-back/permission/edit/?id=' + data.id);
			}
		});
		// checkPermission()
	});
</script>
</body>
</html>